﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DjangoTemplates</title>
</head>
<body>
    <h2>Django模版</h2>
    <hr />
    {# url路由 #}

    {% comment %}
        多行注释,ctrl + / 显示多行注释
    {% endcomment %}

    {#变量#}
    <h4>变量</h4>
    <p>name: {{ name }}</p>
    <p>age: {{ age }}</p>
    {# 列表 #}
    <p>hobby: {{ hobby }}</p>
    <p>hobby.0: {{ hobby.0 }}</p>
    <p>hobby.1: {{ hobby.1 }}</p>
    <p>hobby.2: {{ hobby.2 }}</p>
    {# 字典 #}
    <p>address: {{ address }}</p>
    <p>address.city: {{ address.city }}</p>
    <p>address.street: {{ address.street }}</p>
    <hr />
    {# 标签 #}
    <h4>标签</h4>

    {# if #}
    <h4>if标签</h4>
    {% if name == "runoob" %}
        <p>name is runoob</p>
    {% else %}
        <p>name is not runoob</p>
    {% endif %}

    {# 结合运算符 : and or in #}
    {% if age >= 18 and age < 60 %}
        <p>age is 18 or older</p>
    {% else %}
        <p>age is less than 18</p>
    {% endif %}

    {% if 'foot' in hobby %}
        <p>hobby contains 'foot'</p>
    {% else %}
        <p>hobby does not contain 'foot'</p>
    {% endif %}

    
    <hr />
    <h4>for语句</h4>
    {% for hobby in hobby %}
        <p>hobby: {{ hobby }}</p>
    {% endfor %}

    {% for hobby in hobby2 %}
        <p>hobby: {{ hobby }}</p>
    {% empty %}
        <p>hobby2 is empty</p>
    {% endfor %}


    <br/>
    {# for 循环#}
    {% comment %} 
        forloop.counter: 顺序获取循环序号，从 1 开始计算
        forloop.counter0: 顺序获取循环序号，从 0 开始计算
        forloop.revcounter: 倒序获取循环序号，结尾序号为 1
        forloop.revcounter0: 倒序获取循环序号，结尾序号为 0
        forloop.first（一般配合if标签使用）: 第一条数据返回 True，其他数据返回 False
        forloop.last（一般配合if标签使用）: 最后一条数据返回 True，其他数据返回 False
    {% endcomment %}
    <table border = "1" width= "500">
        {% for start in starts%}
        <tr>
            {% for s in  start %}
            <td>
                {{ s }} - 
                {{forloop.parentloop.counter}} -  {# 父循环计数器 #}
                {{ forloop.counter }}  {# 循环计数器 #}
            </td>
            {% endfor %}
        </tr>    
        {% endfor%}
    </table>
    {# url路由方式 #}
    <hr />
    <h4>过滤器</h4>
    <p>name|upper: {{ name|upper }}</p>
    <p>name|first|upper: {{ name|first|upper }}</p>
    <p>name|lower: {{ name|lower }}</p>
    <p>name|title: {{ name|title }}</p>
    <p>age|add: {{ age|add:5 }}</p>
    <p>hobby|length: {{ hobby|length }}</p>
    <p>hobby|join:",": {{ hobby|join:", " }}</p>
    <p>hobby2 = {{hobby2}}</p>
    <p>hobby2|default:"swim": {{ hobby2|default:"swim" }}</p>

    <p>dt = {{dt}} </p>
    <p>dt = {{dt|date:'y-m-d'}}</p>
    <p>dt = {{dt|date:'Y-m-d'}}</p>
</body>

</html>